<template>
  <div>
    <van-tabbar v-model="active" active-color="#cea62a" @change="changeIndex" route v-if="data.flag">
      <van-tabbar-item v-for="(item, index) in tabbarList" :key="index" :to="item.url">
        <span>{{ item.name }}</span>
        <template #icon="props">
          <img :src="props.active ? item.iconActive : item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!-- <router-view></router-view> -->

    <router-view v-slot="{Component}">
      <keep-alive :include="Kind">
        <Component :is="Component"/>
      </keep-alive>
    </router-view>

  </div>
</template>
<script>

import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup () {
    const Kind = 'KindApi'
    const data = ref({
      flag: true,
      icon: {
        active: '.src/assets/tabberImg/cart.png',
        inactive: '.src/assets/tabberImgAct/cartA.png'
      },
      img: './assets/ava.png'
    })
    const active = ref(0)

    const tabbarList = ref([{
      name: '首页',
      icon: require('@/assets/home.png'),
      iconActive: require('@/assets/home-active.png'),
      url: '/'
    },
    {
      name: '专题',
      icon: require('@/assets/topic.png'),
      iconActive: require('@/assets/topic-active.png'),
      url: '/topic'
    },
    {
      name: '分类',
      icon: require('@/assets/kind.png'),
      iconActive: require('@/assets/kind-active.png'),
      url: '/kind'
    },
    {
      name: '购物车',
      icon: require('@/assets/cart.png'),
      iconActive: require('@/assets/cart-active.png'),
      url: '/cart'
    },
    {
      name: '我的',
      icon: require('@/assets/user.png'),
      iconActive: require('@/assets/user-active.png'),
      url: '/user'
    }
    ])
    const changeIndex = (val) => {
      active.value = val
      console.log(';', val)
    }
    const router = useRouter()
    console.log(router)

    watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
      const arr = ['/', '/topic', '/kind', '/cart', '/user']
      if (arr.includes(newValue)) {
        data.value.flag = true
      } else {
        data.value.flag = false
      }
      console.log('watch', newValue)
    }, { immediate: true })
    return { data, active, tabbarList, changeIndex, Kind }
  },
  created () {
    const userInfo = {
      openId: '1259990309',
      nickName: '小老虎',
      avatarUrl: this.img
    }
    const nickName = userInfo.nickName
    const openId = userInfo.openId
    localStorage.setItem('uerInfo', JSON.stringify(userInfo))
    localStorage.setItem('openId', openId)
    localStorage.setItem('nickName', nickName)
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #f7f8fa;
}

html,
body,
page {
  background-color: #f7f8fa;
}

nav {

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
